<script setup>
import {reactive, ref} from "vue";
import { getUsers, delUser, setUser } from '@/api/user';
import { getTeams } from '@/api/team';
import { useUserStore} from "@/stores/counter"
import SetUserDialog from "@/components/SetUserDialog.vue"

const userStore = useUserStore();

const usersData = reactive([]);

const token = userStore.userMsg.token;
const power = userStore.userMsg.power;

const userRes = await getUsers(token);
const userData = userRes.data;
userData.data.forEach(async val=>{
  val.job = val.power===0 ? '超管' : (val.power===1 ? '经理' : '员工');
  val.pw = "*****";
  // 根据当前用户权限，查询部门信息
  // 超管，查所有
  // 非超管，当指定
  const tId = power===0 ? undefined : val.tId;
  const teamsRes = await getTeams(token, tId);
  teamsRes.data.data.some(val2=>{
    if(val.tId === val2.tId){
      val.team = val2.tName
    }
  })
  usersData.push(val);
})

const deleteRow = (row) => {
  if(row.username === "admin" || userStore.userMsg.power !== 0){
    ElMessage('没有权限，请联系管理员')
    return;
  };
  // 调用删除用户信息接口
  delUser({ token, uId:row.id }).then(res=>{
    // 删除成功
    ElMessage({
      message:res.data.msg,
      type:"info"
    })
    // 从本地渲染的数据中找到当前要删除的用户信息，更新本地响应式数据
    let i=0;
    usersData.some((val,idx)=>{
      i = idx;
      return val.uId === row.id;
    })
    usersData.splice(i, 1);
  })
}

const dialogFormVisible = ref(false);
const rowData = reactive({});

const updateRow = (row) => {
  if(row.username === "admin" || userStore.userMsg.power !== 0){
    ElMessage('没有权限，请联系管理员')
    return
  };
  dialogFormVisible.value = true;
  rowData.uName = row.uName;
  rowData.tId = row.tId;
  rowData.uId = row.uId;
  rowData.power = row.power;
}

function isShow(val){
  dialogFormVisible.value = val;
}

function getNewData(newData){
  newData.token = token;
  if(newData.password === "******"){
    delete newData.password;
  }
  setUser(newData).then(res=>{
    if(res.data.code === 1){
      ElMessage({
        message:"修改成功",
        type:"success"
      })
      usersData.forEach(async val=>{
        if(val.uId === newData.uId){
          val.uName = newData.uName;
          val.tId = newData.tId;
          val.power = newData.power;
          val.job = val.power===0 ? '超管' : (val.power===1 ? '经理' : '员工');
          const teamsRes = await getTeams(token, newData.tId);
          teamsRes.data.data.some(val2=>{
            if(val.tId === val2.tId){
              val.team = val2.tName
            }
          })
        }
      })
    }else{
      ElMessage({
        message:"修改失败",
        type:"error"
      })
    }
  })
}

const onAddItem = () => {}
</script>

<template>
  <div class="user">
    
    <el-table :data="usersData" style="width: 100%" max-height="250">
      <el-table-column prop="uName" label="姓名" width="100" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="pw" label="密码" width="100" />
      <el-table-column prop="tel" label="手机号" width="120" />
      <el-table-column prop="team" label="部门" width="120" />
      <el-table-column prop="job" label="职位" width="120" />
      <el-table-column fixed="right" label="Operations" width="140">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.row)"
          >
            删除
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="updateRow(scope.row)"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="mt-4" style="width: 100%" @click="onAddItem"
      >Add Item</el-button
    >

    <SetUserDialog
      :dialogFormVisible="dialogFormVisible"
      :token="token"
      :rowData="rowData"
      @isShow="isShow"
      @getNewData="getNewData"
    ></SetUserDialog>

  </div>
</template>

<style>
</style>
